<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      id="test"
      style="
        width: 0px;
        height: 12px;
        line-height: 12px;
        margin-bottom: 5px;
        background: rgb(185, 236, 243);
      "
    ></div>
    当前进度：<span id="progress">0%</span>
    <button id="btn">开启</button>
  </body>
  <script>
    const btn = document.getElementById('btn');
    //使用 requestAnimationFrame 实现
    btn.onclick = function () {
      var timer = requestAnimationFrame(function fn() {
        if (parseInt(test.style.width) < 300) {
          test.style.width = parseInt(test.style.width) + 3 + 'px';
          progress.innerHTML = parseInt(test.style.width) / 3 + '%';
          timer = requestAnimationFrame(fn);
        } else {
          cancelAnimationFrame(timer);
        }
      });
    };
    //使用 setInterval 实现
    // btn.onclick = function() {
    //   var timer = setInterval(function () {
    //     if (parseInt(test.style.width) < 300) {
    //       test.style.width = parseInt(test.style.width) + 3 + 'px';
    //       progress.innerHTML = parseInt(test.style.width) / 3 + '%';
    //     } else {
    //       clearInterval(timer);
    //     }
    //   }, 17);
    // }

    //使用 setTimeout 实现
    //btn.onclick = function() {
    //     var timer = setTimeout(function fn() {
    //     if (parseInt(test.style.width) < 300) {
    //       test.style.width = parseInt(test.style.width) + 3 + 'px';
    //       progress.innerHTML = parseInt(test.style.width) / 3 + '%';
    //       timer = setTimeout(fn, 17);
    //     } else {
    //       clearTimeout(timer);
    //     }
    //   }, 17);
    // }
  </script>
</html>
